<template>
  <div class="tl-list-left-search">
    <!-- 查询 -->
    <el-row v-if="isDisplayButton">
      <el-col :span="12" style="text-align:left">
        <el-button type="primary" icon="el-icon-refresh" @click="doReset" :disabled="disableReset">重置</el-button>
      </el-col>
      <el-col :span="12" style="text-align:right">
        <el-button type="primary" icon="el-icon-search" @click="doQuery">搜索</el-button>
      </el-col>
    </el-row>
    <slot name="top" slot="top"></slot>
    <el-scrollbar class="search-container">
      <el-form label-position="top" ref="searchForm" class="search-form" :model="queryParam" @submit.native.prevent>
        <slot></slot>
      </el-form>
    </el-scrollbar>
    <slot name="bottom" slot="bottom"></slot>
  </div>
</template>

<script>
export default {
  name: 'TlListLeftSearch',
  props: {
    queryParam: {
      type: Object,
      required: false
    },
    isDisplayButton: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    disableReset() {
      let disableReset = true
      for (let value of Object.values(this.queryParam)) {
        disableReset = disableReset && (value === null || value === '')
      }
      return disableReset
    }
  },
  methods: {
    doQuery() {
      this.$emit('search', this.queryParam)
    },
    doReset() {
      // this.$refs.searchForm.resetFields()
      for (let key of Object.keys(this.queryParam)) {
        this.$set(this.queryParam, key, null)
      }
      this.$emit('update:queryParam', this.queryParam)
      this.$emit('reset')
    }
  }
}
</script>

<style></style>
